<template>
  <div class="c-music">
    <div
      class="c-main-music"
      ref="progress"
    >
      <div class="c-main-p">
        <div class="flex player-t">
          <div @click="prevTrack">
            <span  class="icon-music fa fa-backward"  />
          </div>
          <div @click="play" v-if="!isTimerPlaying">
            <span  class="icon-music fa fa-play-circle"  />
          </div>
          <div @click="play" v-if="isTimerPlaying">
           <span  class="icon-music fa fa-pause-circle"  />
          </div>
          <div @click="nextTrack">
            <span  class="icon-music fa fa-forward"  />
          </div>
        </div>
        <div class="press-s">
          <div class="progress__bar" >
            <div class="progress__current" :style="{ width: barWidth }"></div>
          </div>
          {{ songData.name }}&nbsp;&nbsp;{{ currentTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    songData:{
        default:""
    }
  },
  data() {
    return {
      isTimerPlaying: false,
      audio: "null",
      barWidth: null,
      currentTime: null,
      currentTrack: "",
    };
  },
  mounted() {
    setTimeout(() => {
      let vm = this;
      this.currentTrack = this.songData;
      this.audio = new Audio();
      this.audio.src = this.currentTrack.url;
      this.audio.ontimeupdate = function () {
        vm.generateTime();
      };
      this.audio.onloadedmetadata = function () {
        vm.generateTime();
      };
      this.audio.onended = function () {
        vm.nextTrack();
        this.isTimerPlaying = true;
      };
    }, 500);
  },
  beforeDestroy(){
      this.audio.pause();
  },
  methods: {
    play() {
      if (this.audio.paused) {
        this.audio.play();
        this.isTimerPlaying = true;
      } else {
        this.audio.pause();
        this.isTimerPlaying = false;
      }
    },
    clickProgress(e) {
      console.log(e);
      // return
      this.isTimerPlaying = true;
      this.audio.pause();
      this.updateBar(e.pageX);
    },
    generateTime() {
      let width = (100 / this.audio.duration) * this.audio.currentTime;
      this.barWidth = width + "%";
      this.circleLeft = width + "%";
      let durmin = Math.floor(this.audio.duration / 60);
      let dursec = Math.floor(this.audio.duration - durmin * 60);
      let curmin = Math.floor(this.audio.currentTime / 60);
      let cursec = Math.floor(this.audio.currentTime - curmin * 60);
      if (durmin < 10) {
        durmin = "0" + durmin;
      }
      if (dursec < 10) {
        dursec = "0" + dursec;
      }
      if (curmin < 10) {
        curmin = "0" + curmin;
      }
      if (cursec < 10) {
        cursec = "0" + cursec;
      }
      this.duration = durmin + ":" + dursec;
      this.currentTime = curmin + ":" + cursec;
    },
    updateBar(x) {
      let progress = this.$refs.progress;
      let maxduration = this.audio.duration;
      console.log(progress.offsetLeft);
      console.log(progress.offsetWidth);
      let position = x - (progress.offsetLeft + 180);
      let percentage = (100 * position) / 540;
      if (percentage > 100) {
        percentage = 100;
      }
      if (percentage < 0) {
        percentage = 0;
      }
      this.barWidth = percentage + "%";
      this.circleLeft = percentage + "%";
      this.audio.currentTime = (maxduration * percentage) / 100;
      this.audio.play();
    },
    prevTrack() {
    this.$emit("lastMusic")
    setTimeout(() => {
        this.resetPlayer();
    }, 500);
      
    },
    nextTrack() {
    this.$emit("nextMusic")
    setTimeout(() => {
        this.resetPlayer();
    }, 500);
    },
    resetPlayer() {
      this.barWidth = 0;
      this.circleLeft = 0;
      this.audio.currentTime = 0;
      this.audio.src = this.songData.url;
      setTimeout(() => {
        if (this.isTimerPlaying) {
          this.audio.play();
        } else {
          this.audio.pause();
        }
      }, 300);
    },
  },
};
</script>

<style  scoped>

.c-music {
  /* width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 300; */
width: 100%;
height: 120px;
}
.c-main-music {
  width: 100%;
  margin: 0 auto;
  height: 110px;
  transition: all 1s;
  position: relative;
  overflow: hidden;
}
.c-main-p {
  width: 100%;
 
  border-radius: 30px;
  background: rgb(240, 237, 237);
  box-shadow: 0rpx 4rpx 20rpx 0px rgba(174, 185, 190, 0.7);
  border: 3px solid rgb(245, 246, 247);
}
.flex {
  display: flex;
}

.player-t {
  width: 100%;
  margin-top: 10px;
  justify-content: space-around;
}
.press-s {
  width: 60%;
  margin: 0 auto;
}
.progress__bar {
  height: 6px;
  width: 100%;
  cursor: pointer;
  background-color: #d0d8e6;
  display: inline-block;
  border-radius: 10px;
}

.progress__current {
  height: inherit;
  width: 0%;
  background-color: #a3b3ce;
  border-radius: 10px;
}
.icon-music {
  width: 50px;
  height: 50px;
  font-size: 25px;
  cursor: pointer;
}
</style>